<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 300px;
            height: 600px;
            /*
                radial-gradient（）径向渐变(放射性的效果)
                默认情况下,径向渐变的形状根据元素的形状来计算的
                    正方形-->圆形
                    长方形-->椭圆形
                    -我们也可以手动指定径向渐变圆心的大小

                    circle
                    ellipse

                    -也可以指定渐变的位置
                    -语法:
                        radial-gradient(大小 at 位置,颜色 位置,颜色 位置)
                            大小:
                                circle
                                ellipse
                                closest-side 近边
                                closest-corner 近角
                                farthest-side 远边
                                farthest-corner 远角

             */
            background-image: radial-gradient(farthest-corner at 100px 100px,yellowgreen,skyblue);
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
</body>
</html>